<link rel="stylesheet" href="__STATIC__/mp/css/task.css">
<div>
	<form class="layui-form" action="" lay-filter="task-form">
	<div class="layui-row">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<a href="{:url('add')}" hisi-data="{width: '50%', height: '50%'}" class="layui-btn layui-btn-primary layui-btn-sm hisi-iframe" title="新建任务">
						<i class="layui-icon">&#xe654;</i>新建任务
					</a>
				</div>
			</div>
			<div class="layui-inline order">
				<div class="layui-input-inline">
					<select name="order" lay-filter="order">
						<option value="priority">按优先级排序</option>
						<option value="create_time">按创建时间排序</option>
						<option value="update_time">按更新时间排序</option>
					</select>
				</div>
			</div>
			<div class="layui-inline project-id">
				<div class="layui-input-inline">
					<select name="project_id" lay-filter="project-id">
						<option value="">全部项目</option>
						{foreach $projectKV as $k=>$v}
						<option value="{$k}">{$v}</option>
						{/foreach}
					</select>
				</div>
			</div>
		</div>
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
			<!-- <a class="layui-btn layui-btn-sm">按钮</a> -->
		</div>
	</div>
	<input type="hidden" value="0" name="type">
	</form>
	
	<div class="layui-tab layui-tab-card" lay-filter="tabFilter">
		<ul class="layui-tab-title">
			<li lay-id="0" class="layui-this">全部任务</li>
			<li lay-id="1">我创建的</li>
			<li lay-id="2">我参与的</li>
			<li lay-id="3">我关注的</li>
		</ul>
		<div class="layui-tab-content layui-row layui-col-space10">
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">未开始
						<span class="layui-badge-rim card-num card-num-1">0</span>
					</div>
					<div class="layui-card-body card-todo" data-status="1">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">进行中
						<span class="layui-badge layui-bg-blue card-num card-num-2">0</span>
					</div>
					<div class="layui-card-body card-doing" data-status="2">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">已完成
						<span class="layui-badge layui-bg-green card-num card-num-3">0</span>
					</div>
					<div class="layui-card-body card-done" data-status="3">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">已暂停
						<span class="layui-badge layui-bg-orange card-num card-num-4">0</span>
					</div>
					<div class="layui-card-body card-pause" data-status="4">
						<!-- 模板输出start -->
						<!-- 模板输出end -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{include file="system@block/layui" /}

<script type="text/html" id="taskTpl">
	{{#  layui.each(d, function(k, v){ }}
	<div class="task-item {{# if(v.canChangeStatus==0){ }}ignore-task-item{{# } }} task-item-{{ v.id }}" data-id="{{ v.id }}">
		<div class="layui-row number">
			<div class="layui-col-md8">
				<i class="layui-icon layui-icon-priority{{ v.priority }}">&#xe66c;</i>task-<span class="copy-item">{{ v.id }}</span>
			</div>
			<div class="layui-col-md4 text-right">
				{{# if(v.client_ordernum != ''){ }}
				<i class="layui-icon font10" title="订单号 {{ v.client_ordernum }}">&#xe857;</i>
				{{# } }}
			</div>
		</div>
		<div class="title"><a href="{:url('detail')}?id={{ v.id }}" class="hisi-iframe" hisi-data="{width: '85%', height: '80%'}" title="[task-{{ v.id }}] 任务详情">{{ v.name }}</a></div>
		<div class="layui-row">
			<div class="layui-col-md6">
				{{# if(v.progressLastAdminInfo.admin_avatar != ''){ }}
					<img class="avatar" src="{{ v.progressLastAdminInfo.admin_avatar }}"/>
				{{# }else{ }}
					<div class="avatar-name">{{ v.progressLastAdminInfo.admin_name }}</div>
				{{# } }}
				<span class="update-time">{{ layui.util.timeAgo(v.update_time*1000, true) }}</span>
			</div>
			<div class="layui-col-md6 text-right mt5">
				
				<a class="layui-btn-xs hisi-iframe" href="{:url('detail')}?id={{ v.id }}" hisi-data="{width: '85%', height: '80%'}" title="[task-{{ v.id }}] 任务详情">
					<i class="layui-icon">&#xe63a;</i>{{# if(v.commentNum > 0){ }}{{ v.commentNum }}{{# } }}
				</a>
				
				{{# if(v.canAttention){ }}
				<a class="layui-btn-xs hisi-ajax" href="{:url('attention')}?id={{ v.id }}" refresh="false" callback="callbackAttention">
					<i class="layui-icon attention-{{ v.id }} {{# if(v.isAttention){ }}yellow{{# } }}">{{# if(v.isAttention){ }}&#xe67a;{{# }else{ }}&#xe67b;{{# } }}</i>
				</a>
				{{# } }}

				{{# if(v.canEdit){ }}
				<a class="layui-btn-xs hisi-iframe" hisi-data="{width: '50%', height: '50%'}" href="{:url('edit')}?id={{ v.id }}" title="修改任务">
					<i class="layui-icon">&#xe642;</i>
				</a>
				{{# } }}

				{{# if(v.canDel){ }}
				<a class="layui-btn-xs hisi-ajax" href="{:url('del')}?id={{ v.id }}" refresh="false" callback="callbackDel" confirm="您确定要执行该操作吗？">
					<i class="layui-icon">&#xe640;</i>
				</a>
				{{# } }}
			</div>
		</div>
	</div>		
	{{# }) }}			
</script>

<script src="__STATIC__/mp/js/Sortable.min.js"></script>
<script type="text/javascript">
	layui.use(['jquery', 'tool', 'laytpl', 'form', 'element'], function() {
		var $ = layui.jquery;
		var laytpl = layui.laytpl;
		var form = layui.form;
		var element = layui.element;
		
		// 卡片背景高度铺满
		$('.layui-card-body').css('height', ($(window).height()-330) + 'px');
		$(window).resize(function() {
			$('.layui-card-body').css('height', ($(window).height()-330) + 'px');
		});
		
		// 关注后回调
		window.callbackAttention = function(obj, res) {
			var taskId = res.data.taskId;
			if (res.data.isAttention == 1) {
				$('.attention-'+taskId).addClass('yellow');
				$('.attention-'+taskId).html('&#xe67a;');
			} else {
				$('.attention-'+taskId).removeClass('yellow');
				$('.attention-'+taskId).html('&#xe67b;');
			}
		};
		
		// 删除后回调
		window.callbackDel = function(obj, res) {
			if(res.code == 1) {
				var taskId = res.data.taskId;
				var cardNum = parseInt($('.task-item-'+taskId).parents('.layui-card').find('.card-num').html());
				$('.task-item-'+taskId).parents('.layui-card').find('.card-num').html(cardNum-1);
				$('.task-item-'+taskId).remove();
			}
		};
		
		// 实现拖放效果
		var SortableInit = function(flag) {
			return {
				group: "task",
				animation: 300,
				sort: false, // 设为false，禁止sort
				handle: ".task-item",	// 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
				filter: ".ignore-task-item",  // 过滤器，不需要进行拖动的元素
				chosenClass: "sortable-chosen",	// 被选中项的css 类名
				dragClass: "sortable-drag",  // 正在被拖拽中的css类名
				ghostClass: "sortable-ghost",  // drop placeholder的css类名
				scrollSpeed: 100, //滚动速
				dataIdAttr: 'data-id',
				/* onAdd: function(evt) {
					console.log('onAdd.'+flag, [evt.item, evt.from]);
				},
				onUpdate: function(evt) {
					console.log('onUpdate.'+flag, [evt.item, evt.from]);
				},
				onRemove: function(evt) {
					console.log('onRemove.'+flag, [evt.item, evt.from]);
				},
				onStart: function(evt) {
					console.log('onStart.'+flag, [evt.item, evt.from]);
				},
				onSort: function(evt) {
					console.log('onSort.'+flag, [evt.item, evt.from]);
				}, */
				onEnd: function(evt) {
					var taskId = $(evt.item).attr('data-id');
					var fromStatus = $(evt.from).attr('data-status');
					var toStatus = $(evt.to).attr('data-status');
					/* console.log(SortableTodo.toArray());*/
					var formOri = parseInt($('.card-num-'+fromStatus).html());
					var toOri = parseInt($('.card-num-'+toStatus).html());
					$('.card-num-'+fromStatus).html(formOri-1);
					$('.card-num-'+toStatus).html(toOri+1);
					$.ajax({
						type: "POST",
						url: "{:url('status')}",
						data: "id="+taskId+"&status="+toStatus,
						dataType:"json",
						success: function(res){
							if (res.code == 1) {
								layer.msg(res.msg, {icon: 1});
							} else {
								layer.msg(res.msg, {icon: 2,anim: 6});
							}
		 				}
			 		});
				}
			}
		}
		var SortableTodo = Sortable.create($('.card-todo')[0], SortableInit('card-todo'));
	    var SortableDoing = Sortable.create($('.card-doing')[0], SortableInit('card-doing'));
		var SortableDone = Sortable.create($('.card-done')[0], SortableInit('card-done'));
		var SortablePause = Sortable.create($('.card-pause')[0], SortableInit('card-pause'));
		
		// 获取任务列表
		window.getList = function() {
			var data = form.val("task-form");
			$('.card-todo,.card-doing,.card-done,.card-pause').html('<img src="/static/mp/image/loading.gif">');
			$.ajax({
				type: "POST",
				url: "{:url('')}",
				data: data,
				dataType:"json",
				success: function(res){
					if (res.code == 1) {
						var todoList = res.data.todoList;
						var doingList = res.data.doingList;
						var doneList = res.data.doneList;
						var pauseList = res.data.pauseList;
						$('.card-num-1').html(res.data.todoNum);
						$('.card-num-2').html(res.data.doingNum);
						$('.card-num-3').html(res.data.doneNum);
						$('.card-num-4').html(res.data.pauseNum);
						
						var Tpl = $('#taskTpl').html();
						laytpl(Tpl).render(todoList, function(html){
							$('.card-todo').html(html);
						});
						
						laytpl(Tpl).render(doingList, function(html){
							$('.card-doing').html(html);
						});
						
						laytpl(Tpl).render(doneList, function(html){
							$('.card-done').html(html);
						});
						
						laytpl(Tpl).render(pauseList, function(html){
							$('.card-pause').html(html);
						});
					} else {
						layer.msg(res.msg, {icon: 2,anim: 6});
					}
 				}
	 		});
		}
		getList();
		
		// 切换选项卡
		element.on('tab(tabFilter)', function(data){
			console.log(this.getAttribute('lay-id')); //当前Tab标题所在的原始DOM元素
			$('input[name=type]').val(this.getAttribute('lay-id'));
			getList();
		});
		// 切换排序
		form.on('select(order)', function(data){
			//console.log(data.value); //得到被选中的值
			getList();
		});
		// 切换项目
		form.on('select(project-id)', function(data){
			//console.log(data.value); //得到被选中的值
			getList();
		});
		
	});
</script>